import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:osc/res/dimens.dart';
import 'package:osc/utils/emoji_util.dart';
import 'package:osc/utils/pd_util.dart';


typedef EmojiOnTap(String name);
class EmojiWidget extends StatefulWidget {
  final EmojiOnTap emojiOnTap;
  final Function emojiOnDelete;

  const EmojiWidget({Key key, @required this.emojiOnTap, @required this.emojiOnDelete}) : super(key: key);

  @override
  _EmojiWidgetState createState() => _EmojiWidgetState();
}

class _EmojiWidgetState extends State<EmojiWidget> with SingleTickerProviderStateMixin{
  bool showQQEmoji = true;

  Map<String, String> _emojiMap;
  List<Map<String, String>> emojiList;

  Map<String, String> _qqEmojiMap;
  List<Map<String, String>> qqEmojiList;


  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 2, vsync: this);
    _qqEmojiMap = EmojiUitl.instance.qqEmojiMap;
    _emojiMap = EmojiUitl.instance.emojiMap;
    qqEmojiList = List();
    emojiList = List();
    initEmojiList(_qqEmojiMap, qqEmojiList);
    initEmojiList(_emojiMap, emojiList);
  }

  @override
  void dispose() {
    super.dispose();
    tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        buildEmoji(),
        buildEmojiBottom(),
      ],
    );
  }

  buildEmoji(){
    return Container(
      height: 200,
      color: Colors.white,
      width: ScreenUtil.getScreenW(context),
      child: TabBarView(
        controller: tabController,
        children: [
          buildEmojiGrid(qqEmojiList),
          buildEmojiGrid(emojiList),
        ],
      ),
    );
  }

  buildEmojiGrid(List<Map<String, String>> list){
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 7),
      itemBuilder: (BuildContext context, int index){
        Map<String, String> map = list.elementAt(index);
        String name = map["name"];
        String imageName = map["imageName"];
        return GestureDetector(
          onTap: (){
            if(widget.emojiOnTap != null){
              widget.emojiOnTap(name);
            }
          },
          child: Container(
            color: Colors.white,
            alignment: Alignment.center,
            child: Image.asset(PdUtil.getEmojiPath(imageName), height: Dimens.view_item_icon_height_normal, fit: BoxFit.contain,),
          ),
        );
      },
      itemCount: list.length,
    );
  }

  buildEmojiBottom(){
    return buildCommonBottom(
      Row(
        children: <Widget>[
          buildCommonBottomItem(
              child: TabBar(
                labelColor: Colors.green,
                unselectedLabelColor: Colors.black54,
                indicatorWeight: 1,
                indicatorPadding: EdgeInsets.all(0),
                indicatorColor: Colors.transparent,
                controller: tabController,
                  tabs: [
                    Tab(text: "QQ表情",),
                    Tab(text: "Emoji表情",),
                  ],
              ),
            flex: 2,
          ),
          buildCommonBottomItem(
              child: Image.asset(PdUtil.getImagePath("tweet_delete_emoji")),
              onTap:(){
                if(widget.emojiOnDelete != null){
                  widget.emojiOnDelete();
                }
              },
          ),
        ],
      ),
    );
  }

  buildCommonBottom(Widget child){
    return Container(
      height: Dimens.view_item_height_big,
      width: ScreenUtil.getScreenW(context),
      padding: EdgeInsets.symmetric(vertical: Dimens.gap_view_normal),
      decoration: BoxDecoration(
        color: Colors.white70,
        border: Border(top: BorderSide(color: Colors.black12)),
      ),
      child: child,
    );
  }

  buildCommonBottomItem({@required Widget child, Function onTap, int flex = 1}){
    return Expanded(
      flex: flex,
      child: GestureDetector(
        onTap: (){
          if(onTap != null) {
            onTap();
          }
          refreshView();
        },
        child: Container(
          alignment: Alignment.center,
          color: Colors.transparent,
          child: child,
        ),
      ),
    );
  }

  refreshView(){
    if(mounted){
      setState(() {

      });
    }
  }

  initEmojiList(Map<String, String> map, List<Map<String, String>> list){
    map.forEach((key, value){
      Map<String, String> map = Map();
      map["name"] = key;
      map["imageName"] = value;
      list.add(map);
    });
  }
}
